<template>
    <div class="photoShare">
        <div class="mui-content">
            <div id="slider" class="mui-slider">
                <div id="sliderSegmentedControl"
                     class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
                    <div class="mui-scroll">
                        <!--<router-link  class="mui-control-item" to="/" :class="" >-->
                            <!--全部-->
                        <!--</router-link>-->
                        <a  :class="['mui-control-item', item.id == 0 ? 'mui-active' : '']" to="/"  v-for="(item, i) in header" :key = i @click="getPhotoList(item.id)">
                            {{item.title}}
                        </a>

                    </div>
                </div>

            </div>
        </div>

        <!--图片列表-->
        <ul class="photoList">
            <router-link class="photoContent" v-for="(item, i) in photoList" :key="i" tag="li" :to="'/home/photoInfo/'+item.id">
                <img v-lazy="item.img_url" alt="图走失了"/>
                <div class="discription">
                    <h3>{{item.title}}</h3>
                    <p>{{item.zhaiyao}}</p>
                </div>
            </router-link>
        </ul>
    </div>
</template>

<script type="text/ecmascript-6">
    import mui from "../../lib/mui/js/mui.min.js";
    export default {
        data(){
            return{
                header:[],
                photoList:[]
            }
        },
        created() {
            this.getHeader()
            this.getPhotoList(0)
        },
        mounted(){
            mui('.mui-scroll-wrapper').scroll({
                deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
            });
        },
        methods:{
            getHeader(){
                this.$http.get("api/getimgcategory").then(result => {
                    if(result.body.status === 0){
                        let all = {
                            title:'全部',
                            id:'0'
                        }
                        this.header = result.body.message
                        // console.log(result)
                        this.header.unshift(all)
                        // console.log(this.header)
                    }
                })
            },
            getPhotoList(cateid){
                this.$http.get("api/getimages/"+cateid).then(result => {
                    if (result.body.status === 0){
                    this.photoList = result.body.message
                    }
                })
            }
        },

    };

</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
    .photoShare
        .mui-content
            background-color: white;
        .photoList
            list-style  none
            padding-left: 0;
            margin: 10px 3px;

            .photoContent
                background-color #8f8f94
                box-shadow 0 0 9px #999
                position relative
                text-align center
                margin: 0 10px
                img
                    width 100%
                .discription
                    color #FFFFFF
                    background-color rgba(0, 0, 0, 0.4)
                    position absolute
                    bottom 0
                    text-align: left;
                    width 100%
                    padding: 0 5px;
                    min-height 100px
                    max-height 120px
                    margin-bottom 7px
                    h3
                        font-size 14px
                    p
                        color #FFFFFF
                        font-size 11px
                        line-height 20px

</style>